<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="hg-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <link rel="stylesheet" href="./lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="./lib/layui_ext/dtree/dtree.css" />
    <link rel="stylesheet" href="./lib/layui_ext/dtree/font/dtreefont.css" />
    <link rel="stylesheet" href="./lib/admin/admin.css" media="all">
    <link rel="stylesheet" href="./lib/Scrollbar/jquery.scrollbar.css">
    <script type="text/javascript" src="./lib/admin/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./lib/Scrollbar/jquery.scrollBar.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js"></script>
    <script type="text/javascript" src="./lib/admin/admin.js"></script>
    <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    <style>
        .layui-tree-main {
            cursor: pointer;
            padding-right: 10px;
            float: left;
            border-width: 1px;
            border-style: solid;
            border-color: #e6e6e6;
            margin: 10px 0;
        }
    </style>
</head>

<body class="layui-body-content">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">
                <div class="layui-form">
                    <div class="layui-form-item ">
                        <div class="layui-inline"><i class="fa fa-file-text-o fa-fw"></i> 树形组件Dtree</div>
                    </div>
                    <div class="layui-form-item layui-layout-left">
                        <div class="layui-inline">
                            <input class="layui-input layui-input-sm" style="width: 300px;" type="text" name="search"
                                placeholder="快速查找" autocomplete="off">
                            <input id="dept" type="hidden" name="dept" value="0" />
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="querysubmit">
                                <i class="layui-icon layui-icon-sm">&#xe615;</i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card-body layui-tree">
                <div class="layui-tree-main">
                    <div class="demo-tree">
                        <ul id="deptTree" class="dtree" data-id="0"></ul>
                    </div>
                </div>
                <div style="margin-left: 225px;">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>

            </div>
        </div>
    </div>
</body>
<script>
    //树形列表初始化
    layui.config({
        base: '../lib/layui_ext/'
    }).extend({
        dtree: 'dtree/dtree'
    }).use(['dtree'], function () {
        var dtree = layui.dtree;
        // 初始化树
        var treeDept = dtree.render({
            elem: "#deptTree",
            width: "200",
            height: "full-100",
            dataFormat: "list", //list数据id-pid关联模式，不设置为children模式
            method: "Get",
            url: "/Depart/GetTreeList",
            selectTips: "请选择末级部门",
            initLevel: 3, //默认展开层次
            load: false, //加载数据时是否显示遮罩
            menubar: true, //下拉框中开启菜单栏
            checkbar: false,
            response: {
                treeId: "id", //绑定数据中ID字段名
                parentId: "gradeId", //绑定数据中父ID字段名
                title: "departName", //绑定数据中显示字段名
            },
            data: [{
                "id": 1,
                "departName": "2020\u7EA7",
                "gradeId": 0
            }, {
                "id": 2,
                "departName": ".net core \u57FA\u7840\u73ED",
                "gradeId": 1
            }, {
                "id": 3,
                "departName": ".net core \u7CBE\u82F1\u73ED",
                "gradeId": 1
            }, {
                "id": 4,
                "departName": "java EE \u57FA\u7840\u73ED",
                "gradeId": 1
            }]
        });
        dtree.on("node('deptTree')", function (obj) {
            var aa = $('button[lay-filter="querysubmit"]');
            if (obj.param.leaf) {
                $("#dept").val(obj.param.nodeId);
                aa.click();
            } else {
                $("#dept").val(obj.param.nodeId);
                aa.click();
            }
        });
    });

    //监听表单提交事件
    hg.form.onsubmit('querysubmit', function (data) {
        hg.msghide("重新加载数据..");
        table && table.reload(data);
    });
    var tableCols = [
        [{
                type: 'checkbox'
            },
            {
                field: 'id',
                width: 80,
                title: '编号',
                sort: true
                //}, {
                //    field: 'photos',
                //    title: '学生照片',
                //    width: 100,
                //    align: 'center',
                //    templet: function (d) {
                //        return '<img src="' + d.photos + '" />';
                //    }
            }, {
                field: 'name',
                width: 100,
                title: '学生姓名',
                sort: true
            }, {
                field: 'genderName',
                title: '性别',
                width: 80,
                sort: true
            }, {
                field: 'nationName',
                title: '民族',
                width: 80,
                sort: true
            }, {
                field: 'enrollmentDT',
                title: '入学时间',
                width: 100,
                sort: true,
                templet: function (d) {
                    return layui.util.toDateString(d.enrollmentDT, "yyyy-MM-dd");
                }
            }, {
                field: 'address',
                title: '学生地址',
                minWidth: 200,
                sort: true
            }, {
                field: 'statusName',
                title: '激活状态',
                width: 100,
                sort: true
            }, {
                field: 'right',
                width: 160,
                title: '操作',
                fixed: 'right',
                templet: function (d) {
                    return '<a class="layui-btn layui-btn-xs" lay-event="details">详情</a> <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>'
                }
            }
        ]
    ];
    var toolbar = [{
        text: '删除',
        layuiicon: '&#xe640;',
        class: 'layui-btn-danger',
        handler: function (obj, row) {
            if (obj.checkstatus && obj.checkstatus.data.length > 0) {
                hg.confirm("批量删除所有选中的数据，确定要删除吗？", function () {
                    //console.log(obj.checkstatus.data.map(function (x) { return x.id }).join(','))
                    $.ajax({
                        url: '/StudentInfo/DeleteAll',
                        data: {
                            arr: obj.checkstatus.data.map(function (x) {
                                return x.id
                            })
                        },
                        type: 'POST',
                        success: function (data) {
                            if (data.success) {
                                hg.msg('批量删除成功！');
                                //重载表格数据
                                //hg.table.datatable('test', 'reload');
                                table && table.reload();
                            } else {
                                hg.msg(data.msg);
                            }
                        },
                        error: function () {
                            hg.msg("网络请求失败！");
                        }
                    });

                });
            } else {
                hg.msg('请选中一个或多个复选框，再操作！');
            }
        }
    }, {
        text: '添加',
        layuiicon: '&#xe608;',
        class: 'layui-btn-normal',
        handler: function () {
            hg.open('添加学生', '/StudentInfo/Create', 780, 580);
        }
    }];
    var data = [{"id":10002,"name":"\u8001\u674E","gender":0,"nation":0,"enrollmentDT":"2020-04-23T00:00:00","departId":3,"phone":"13902451189","email":"laoli@stu.com","identityCard":"230210199802127323","address":"\u5317\u4EAC\u5E02\u671D\u9633\u533A\u4E1C\u4E09\u73AF\u4E2D\u8DEF\u753210\u53F7","photos":"http://127.0.0.1:5000\\Upload\\StudentPhotos\\stu_2.jpg","photosFile":null,"status":0,"createdTime":"2020-06-30 13:35:01.1772292","modifiedTime":"2020-06-30 13:35:01.1772298","operatorName":null,"genderName":"\u7537","nationName":"\u6C49\u65CF","statusName":"\u672A\u6FC0\u6D3B","departName":".net core \u7CBE\u82F1\u73ED"},{"id":10001,"name":"\u5C0F\u5B89","gender":1,"nation":1,"enrollmentDT":"2020-04-23T00:00:00","departId":4,"phone":"13902451188","email":"xiaoan@stu.com","identityCard":"230210199708162251","address":"\u671D\u9633\u533A\u671D\u9633\u516C\u56ED\u897F\u8DEF9\u53F7\u9662\u4E5D\u53F7","photos":"http://127.0.0.1:5000\\Upload\\StudentPhotos\\stu_1.jpg","photosFile":null,"status":0,"createdTime":"2020-06-30 13:35:01.1743803","modifiedTime":"2020-06-30 13:35:01.1743809","operatorName":null,"genderName":"\u5973","nationName":"\u8499\u53E4\u65CF","statusName":"\u672A\u6FC0\u6D3B","departName":"java EE \u57FA\u7840\u73ED"}];
    //基本数据表格
    var table = hg.table.datatable('test', '用户管理', data, {}, tableCols, toolbar, true, 'full-100', ['filter','print', 'exports']);
</script>

</html>